<template>
  <div class="vb-input-wrapper">
    <input
      class='vb-input'
      :class="{'is-disabled':disabled}"
      :placeholder="placehodler"
      :disabled="disabled"
      :value="value"
      :name="name"
      :type="showPassword?(showPasswd?'password':'text'):type"
      @input="handleInput"
    >
    <span
      class="vb-input__suffix-inner"
      v-if="showSuffix"
    >
      <i
        class="vb-icon-eye"
        v-if="showPassword&&value"
        @click="passwdShow"
        :class="{'vb-show-passwd':showPasswd}"
      ></i>
      <i
        class="vb-icon-clear"
        v-if="clearable&&value"
        @click="clear"
      ></i>
    </span>
  </div>
</template>

<script>
export default {
  name: "vbInput",
  data() {
    return {
      //是否显示密码图标
      showPasswd: {
        Type: Boolean,
        default: true,
      },
    };
  },
  props: {
    name: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    placehodler: {
      type: String,
      default: "please input",
    },
    //禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    //输入框值
    value: {
      type: [String,Number],
      default: "",
    },
    //清除图标是否显示
    clearable: {
      type: Boolean,
      default: false,
    },
    //密码图标是否显示
    showPassword: {

      type: Boolean,
      default: false,
    },
  },
  methods: {
    //发送input事件，组件的数据双向绑定
    handleInput(e) {
      this.$emit("input", e.target.value);
    },
    //清楚输入框内容
    clear() {
      this.$emit("input", "");
    },
    //控制密码是否明文
    passwdShow() {
      this.showPasswd = !this.showPasswd;
    },
  },
  //如果不是账号和密码框，不渲染清除和密码图标。
  computed: {
    showSuffix() {
      return this.clearable || this.showPassword;
    },
  },
};
</script>

<style lang='scss' scoped>
@import "@/assets/css/Input.scss";
</style>